/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react-hooks/exhaustive-deps */
import { FC, memo, useEffect, useState } from 'react'
import { NumberCounterWrapper } from './style'

interface IState {
  children?: React.ReactNode
  targetNumber: number | string
}

const NumberCounter: FC<IState> = memo((props) => {
  const { targetNumber = 0 } = props

  // 数字数组
  const numberArr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  // 目标数字组成的数组
  const strArr =
    typeof targetNumber === 'string' ? targetNumber?.split('') : targetNumber?.toString().split('')

  const arr = strArr?.map(() => 0)

  // 当前数字组成的数组
  const [currentArr, setCurrentArr] = useState<number[] | string[]>(arr)
  useEffect(() => {
    setCurrentArr(strArr)
  }, [])

  return (
    <NumberCounterWrapper>
      {strArr?.map((item, index) => {
        return (
          <div key={index} className="num_item_wrap">
            {numberArr.map((num) => {
              return (
                <span
                  className="num_item"
                  key={num}
                  style={{
                    transform: `translateY(${-item * 50}px)`,
                    transitionDelay: `${(index as number) * 0.1}s`
                  }}
                >
                  {num}
                </span>
              )
            })}
          </div>
        )
      })}
    </NumberCounterWrapper>
  )
})

export default NumberCounter
